"text slider"
Bootstrap 3.0.0 Snippet by Surya Varre

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <nav class="navbar navbar-inverse navbar-fixed-top"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <div class="collapse navbar-collapse" id="myNavbar"> <ul class="nav navbar-nav navbar-left"> <a class="navbar-brand" href="#">website<span style="color:#fff">na</span>me</a> </ul> <ul class="nav navbar-nav navbar-right"> <li><a href="#">Home</a></li> <li><a href="#">Blog</a></li> <li><a href="#">Shop</a></li> <li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li> <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li> </ul> </div> </div> </div> </nav> <!--slider--> <div class="container-fluid" style="margin-top:51px;"> <div class="row"> <div class="col-md-12"> <div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> <ol class="carousel-indicators"> <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li> <li data-target="#carousel-example-generic" data-slide-to="1"></li> <li data-target="#carousel-example-generic" data-slide-to="2"></li> </ol> <div class="carousel-inner"> <div class="item active"> <img src="images/ban.jpg" alt="First slide" class="img-responsive" width="100%"> <div class="carousel-caption"> <p> Your best day is incomplete without friends<br>invitefrids on your wedding and let them ful fill your wishes.</p> </div> </div> <div class="item"> <img src="images/ban.jpg" alt="First slide" class="img-responsive" width="100%"> <div class="carousel-caption"> <p> Your best day is incomplete without friends<br>invitefrids on your wedding and let them ful fill your wishes.</p> </div> </div> <div class="item"> <img src="images/ban.jpg" alt="First slide" class="img-responsive" width="100%"> <div class="carousel-caption"> <p> Your best day is incomplete without friends<br>invitefrids on your wedding and let them ful fill your wishes.</p> </div> </div> </div> <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left"></span></a><a class="right carousel-control" href="#carousel-example-generic" data-slide="next"><span class="glyphicon glyphicon-chevron-right"> </span></a> </div> </div> </div> </div> <!--content--> <div class="jumbotron"> <div class="container text-center"> <h2>Share moments with your friends in three steps</h2> <div class="col-sm-3"> <img src="images/Create-your-wedding.png"> <p>Create your wedding profile built a gift list.</p> </div> <div class="col-sm-3"> <img src="images/share-it-with-friends.png"> <p>share it with friends manage RSVP.</p> </div> <div class="col-sm-3"> <img src="images/your-friends-pool-in.png"> <p>your friends pool-in and receive the funds.</p> </div> <div class="col-sm-3"> <button type="button" class="btn btn-danger" style="margin-top:110px;">lets get started</button> </div> </div> </div> <!--we know about what you want--> <div class="container text-center"> <h2>we know about what you want</h2> <div class="col-sm-4"> <img src="images/about1.png"> </div> <div class="col-sm-4"> <div id="absolute"> <div class="centerd"> </div> </div> </div> <div class="col-sm-4"> <p style="text-align:justify;margin-top:25px;">The most special day of your life is incomplete without your friends and family Share the happiness of your D-Day by inviting your near and dear ones on SevenKnots Share your wedding events and also manage the guest list</p> </div> <div class="clearfix"></div> <!-- ----> <div class="col-sm-4"> <p style="text-align:justify;margin-top:25px;">What about that honeymoon trip, which you are planning Tell your friends and let them surprise you by gifting it to you . Express your list of gifts which you wish to receive and share it with your friends</p> </div> <div class="col-sm-4"> <div id="absolute"> <div class="centerd"> </div> </div> </div> <div class="col-sm-4"> <img src="images/about2.png"> </div> <div class="clearfix"></div> <!-- ------> <div class="col-sm-4"> <img src="images/about3.png"> </div> <div class="col-sm-4"> <div id="absolute"> <div class="centerd"> </div> </div> </div> <div class="col-sm-4"> <p style="text-align:justify;margin-top:25px;">Share an account together because now onward it is all about sharing, right? Invite your friends along with Bride's friends on SevenKnots Manage your guests and let them gift you the most beautiful wish list that you have made together. </p> </div> <div class="clearfix"></div> <!-- ----> <div class="col-sm-4"> <p style="text-align:justify;margin-top:25px;">We would not test your friendship by making you guess what the bride wants Those days of endless confusion and clueless guessing are over. You all are going together, you should gift together, and gift exactly what she has asked for. Come to SevenKnots, like what she wants ? why not gift it to her? Together! </p> </div> <div class="col-sm-4"> <div id="absolute"> <div class="centerd"> </div> </div> </div> <div class="col-sm-4"> <img src="images/about4.png"> </div> <div class="clearfix"></div> </div> <!--Our lovely guests now have to say about it--> <div class="jumbotron"> <div class="container text-center"> <h2>Our lovely guests now have to say about it</h2> <div id="myCarousel" class="carousel slide text-center" data-ride="carousel"> <!-- Indicators --> <ol class="carousel-indicators"> <li data-target="#myCarousel" data-slide-to="0" class="active"></li> <li data-target="#myCarousel" data-slide-to="1"></li> <li data-target="#myCarousel" data-slide-to="2"></li> </ol> <!-- Wrapper for slides --> <div class="carousel-inner" role="listbox"> <div class="item active"> <h4>"This company is the best. I am so happy with the result!"<br><span style="font-style:normal;">Michael Roe, Vice President, Comment Box</span></h4> </div> <div class="item"> <h4>"One word... WOW!!"<br><span style="font-style:normal;">John Doe, Salesman, Rep Inc</span></h4> </div> <div class="item"> <h4>"Could I... BE any more happy with this company?"<br><span style="font-style:normal;">Chandler Bing, Actor, FriendsAlot</span></h4> </div> </div> <!-- Left and right controls --> <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div> </div> </div> <!--Going on Wedding ? Accesorize Yourself--> <div class="container text-center"> <h2>Going on Wedding ? Accesorize Yourself</h2> <div class="row"> <div class="col-sm-3"> <img src="images/Wedding1.png"> <button type="button" class="btn btn-danger">shop now</button> </div> <div class="col-sm-3"> <button type="button" class="btn btn-danger">shop now</button> </div> <div class="col-sm-3"> <button type="button" class="btn btn-danger">shop now</button> </div> <div class="col-sm-3"> <img src="images/Wedding4.png"> <button type="button" class="btn btn-danger">shop now</button> </div> </div> </div> <!--- footer--> <div class="container-fluid" style="background-color:#000;color:#fff;padding:10px;margin-top:10px;"> <div class="conteiner text-center"> <span>About us</span> | <span>Terms of use</span> | <span>Privacy</span> | <span>Contact Us</span> | <span>Follow Us</span> </div> </div> </body> </html>
.nav .navbar-nav .navbar-left{ color:#f00b0b; } #absolute { position:absolute; top:10px; left:10px; width:50%; height:50%; background:yellow; } .centerd { display:table-cell; vertical-align:middle; } .main-text { position: absolute; top: 50px; color: #000; } .btn-min-block { min-width: 170px; line-height: 26px; } .btn-clear { color: #000; background-color: transparent; border-color: #FFF; margin-right: 15px; } .btn-clear:hover { color: #000; background-color: #e9e9ec; } .carousel-control.right, .carousel-control.left { background-image: none; color: #f4511e; } .carousel-indicators li { border-color: #f4511e; } .carousel-indicators li.active { background-color: #f4511e; } .item h4 { font-size: 19px; line-height: 1.375em; font-weight: 400; font-style: italic; margin: 70px 0; } .item span { font-style: normal; }

Related: See More


Questions / Comments: